<template>
  <div class="app-container">

    <!-- 暂不需要搜索和查询按钮 -->
    <!-- 搜索栏 -->
    <!--<el-form ref="seachForm" :model="queryInfo" class="container-seach" label-width="90px">-->
    <!--<el-row>-->
    <!--<el-col :span="24">-->
    <!--<el-form-item label="币种" prop="status">-->
    <!--<el-select v-model.trim="queryInfo.currency" placeholder="请选择" @change="searchData">-->
    <!--<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>-->
    <!--</el-select>-->
    <!--<el-button type="primary" icon="el-icon-search" @click="searchData">搜索</el-button>-->
    <!--<el-button class="refresh" icon="el-icon-refresh" @click="resetForm('seachForm')">重置</el-button>-->
    <!--<el-button type="primary" icon="el-icon-plus" @click="addBtn">新增</el-button>-->
    <!--</el-form-item>-->
    <!--</el-col>-->
    <!--</el-row>-->
    <!--</el-form>-->

    <!-- 表格内容 -->
    <div class="container-table">
      <el-table border :data="tableData" class="table_color" style="width: 100%" v-loading="listLoading">
        <el-table-column prop="name" label="币种名称" align="center"/>
        <el-table-column prop="code" label="代码" align="center"/>
        <el-table-column prop="code" label="欧易代码" align="center"/>
        <el-table-column prop="state" label="是否启用" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state" active-color="#13ce66" inactive-color="#ff4949" active-value="1"
                       inactive-value="0" @change="stateBtn($event,scope.row)" disable="true" disabled/>
          </template>
        </el-table-column>

        <!-- 暂不需要删除 -->
        <!--<el-table-column label="操作" align="center" width="250">-->
        <!--<template slot-scope="scope">-->
        <!--<el-button type="danger" size="mini" @click="delBtn(scope.row)">删除</el-button>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>

    <!-- 新增弹窗 -->
    <el-dialog title="新增币种" :visible.sync="addCurrencyVisible" style="width: 1100px;margin: auto">
      <el-form ref="dataForm" :rules="rules" :model="fromTemp" label-position="left" label-width="90px"
               style="width: 400px; margin-left:50px;">
        <el-form-item label="币种名称" prop="name">
          <el-input v-model="fromTemp.name" placeholder="请输入币种名称"/>
        </el-form-item>
        <el-form-item label="欧易代码" prop="code">
          <el-input v-model="fromTemp.code" placeholder="请输入欧易代码"/>
        </el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio v-model="fromTemp.state" label="1">启用</el-radio>
          <el-radio v-model="fromTemp.state" label="0">停用</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-right: 50px">
        <el-button @click="addCurrencyVisible = false"> 取消</el-button>
        <el-button type="primary" @click="addCurrency"> 确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getConfigCurrencyList} from '@/api/modules/platformConfig'

  export default {
    data() {
      return {
        listLoading: true,
        // 查询参数对象
        queryInfo: {
          currency: ""
        },
        options: [
          {
            value: "BTC",
            label: "比特币"
          },
          {
            value: "ETH",
            label: "以太坊"
          }
        ],
        tableData: [],
        addCurrencyVisible: false,
        fromTemp: {
          name: '',
          code: '',
          state: ''
        },
        rules: {
          name: [
            {required: true, message: '请输入币种名称', trigger: 'blur'},
            {min: 3, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
          ],
          code: [
            {required: true, message: '请输入欧易代码', trigger: 'blur'},
            {min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}
          ],
          state: [
            {required: true, message: '请选择对应状态', trigger: 'blur'},
          ]
        }
      };
    },
    created() {
      this.listLoading = true
      this.searchData()
    },
    methods: {
      searchData() {
        console.log("搜索按钮")
        console.log("搜索币种", this.queryInfo.currency)
        console.log("--------------")
        getConfigCurrencyList().then(res => {
          this.tableData = res.data
        })
        this.listLoading = false
      },

      resetForm(formName) {
        console.log("重置按钮")
        console.log("--------------")
        this.$refs[formName].resetFields();
        this.queryInfo = {
          currency: ""
        };
        this.searchData();
      },

      addBtn() {
        console.log("新增按钮")
        this.addCurrencyVisible = true
      },

      stateBtn(now, row) {
        this.$notify({
          title: '提示',
          message: '暂不支持禁用',
          type: 'warning'
        });
        console.log("切换状态按钮")
        console.log("新状态", now)
        console.log("对应ID", row.id)
        console.log("--------------")
      },

      delBtn(row) {
        console.log("删除按钮")
        console.log("删除ID", row.id)
        // 成功提示语
        this.$notify({
          title: "Success",
          message: "删除成功",
          type: "success",
          duration: 2000
        });
        // 成功后刷新列表数据
        this.searchData()
      },

      addCurrency() {
        console.log("新增币种")
        this.$refs["dataForm"].validate(valid => {
          if (valid) {
            console.log("字段校验通过", this.fromTemp)

            // 成功提示语
            this.$notify({
              title: "Success",
              message: "新增成功",
              type: "success",
              duration: 2000
            });
            // 关闭新增弹框
            this.addCurrencyVisible = false
            // 重置新增表单数据
            this.fromTemp = {name: '', code: '', state: ''}
            // 成功后刷新列表数据
            this.searchData()
          }
        });
      }
    }
  };
</script>

<style>
  .item {
    margin-top: 10px;
  }
</style>
